<template>
  <div id="centreRight1">
    <div class="body-box">
      <!--      <dv-scroll-board :config="config" style="width:415px;height:400px; font-size: 24px"/>-->
      <div @mouseout='mouseout' @mouseover='mouseover'>
        <el-table ref="table" :data="config.tableData"
                  :header-cell-style="{color: '#1fc5ff',  fontSize: '20px', backgroundColor: '#03040b',}"
                  :cell-style="{color: '#fff',  fontSize: '18px', backgroundColor: '#03040b',border:'none'}"
                  class="tableStyle"
                  style="width: 400px" height="400">
          <el-table-column
              prop="id"
              label="simple"
              width="200"
              align="center">
          </el-table-column>
          <el-table-column
              prop="value"
              label="label"
              width="200"
              align="center">
          </el-table-column>
        </el-table>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      config: {
        header: ["simple", "label"],
        tableData: [],
        data: [
          ["1", "<span  class='colorGrass' style='font-size: 24px;'>0</span>"],
          ["2", "<span  class='colorRed' style='font-size: 24px;' >5</span>"],
          ["3", "<span  class='colorGrass' style='font-size: 24px;' >2</span>"],
          ["4", "<span  class='colorGrass' style='font-size: 24px;'>3</span>"],
          ["5", "<span  class='colorGrass' style='font-size: 24px;'>4</span>"],
          ["6", "<span  class='colorGrass' style='font-size: 24px;'>7</span>"],
          ["7", "<span  class='colorGrass' style='font-size: 24px;'>8</span>"],
          ["8", "<span  class='colorRed' style='font-size: 24px;'> 5</span>"],
          ["9", "<span  class='colorRed' style='font-size: 24px;'>4</span>"],
          ["10", "<span  class='colorGrass' style='font-size: 24px;'>8</span>"]
        ],
        rowNum: 7, //表格行数
        headerHeight: 20,
        headerBGC: "#0f1325", //表头
        oddRowBGC: "#0f1325", //奇数行
        evenRowBGC: "#171c33", //偶数行
        index: false,
        // columnWidth: [50,50],
        align: ["center"]
      }
    };
  },
  components: {},
  mounted() {
    this.mouseout();
    // 为全局事件总线绑定自定义事件
    this.$bus.$on('getPredictData', (data) => {
      this.config.tableData = data
    })
  },
  beforeDestroy() {
    // 组件被销毁了，不能进行数据传输
    // 解绑事件
    this.$bus.$off('getPredictData')
  },
  methods: {
    mouseover() {
      clearInterval(this.timer)
    },
    mouseout() {
      this.autoScroll(false)
    },
    autoScroll(init) {
      this.$nextTick(() => {
        const t = 50
        const box = this.$el.querySelector('.el-table__body-wrapper')
        const content = this.$el.querySelector('.el-table__body')
        if (init) box.scrollTop = 0
        this.timer = setInterval(() => {
          this.rollStart(box, content)
        }, t)
      })
    },
    rollStart(box, content) {
      if (box.scrollTop >= (content.scrollHeight - box.offsetHeight)) {
        box.scrollTop = 0
      } else {
        box.scrollTop++
      }
    },
  }
};
</script>

<style lang="scss">
#centreRight1 {
  //background-color: red;/
  //padding: 0.2rem;z
  height: 300px;
  //width: 400px;;
  //min-width: 3.75rem;
  border-radius: 0.0625rem;


  .bg-color-black {
    display: flex;
    justify-content: center;
    align-items: center;
    //height: 80%;
    //border-radius: 0.125rem;/
  }

  .text {
    color: #c3cbde;
  }

  .body-box {
    margin-left: 30px;
    margin-top: 60px;
    border-radius: 0.125rem;
    overflow: hidden;
  }
}

.tableStyle {
  //margin-left: 30px;
  width: 100%;
  //滚动条的宽高
  ::-webkit-scrollbar {
    width: 0vh;
    height: 0vh;
  }

  //滚动条的滑块背景色
  ::-webkit-scrollbar-thumb {
    background: rgba(16, 34, 84, 1);
    border-radius: 1vh;
  }

  //滚动条的背景色
  ::-webkit-scrollbar-track {
    background: rgba(17, 30, 76, 1);
  }
}

.body-box .el-table,.body-box .el-table tr{
  background-color: transparent;
}


</style>
